<template>
	<div class="layout">
		<Layout :style="{ minHeight: '100vh' }">
			<Header>
				<Menu name="11" mode="horizontal" theme="dark" active-name="1">
					<div class="layout-logo w-50">
						<!-- <img class="w-100 h-100 align-top" src="../assets/logo.png" /> -->
						<h4 class="text-light">栈程教育运营管理系统</h4>
					</div>
					<div class="layout-nav">
						<Menu mode="horizontal" style="float: right;right: 280px;" theme="dark" active-name="1">
							<Submenu name="3">
								<template slot="title">
									<Badge :count="interviewTotal+backviewTotal" style="top: 15px;right: 10px;">
										<Icon type="ios-notifications" size="20"
											style="position: relative; top: -15px;right: -10px;"></Icon>
									</Badge>
									<span>待办事项</span>
								</template>
								<MenuItem  :to="jumpToInfiStatistics" name="3-2">
								<span style="font-size: 16px;padding: 5px;">今日待到访{{ interviewTotal }}人</span></br>
								<hr />
								<span style="font-size: 16px;padding: 5px;">今日待回访{{ backviewTotal }}人</span>
								</MenuItem>
								<hr />
								<MenuItem  :to="jumpToInfiStatistics"    v-show="showFlag" name="3-2">
								<span
									style="font-size: 16px;padding: 5px;">今日总待到访{{ allInterviewTotal }}人</span>
								<hr />
								<span 
									style="font-size: 16px;padding: 5px;">今日总待回访{{ allBackviewTotal }}人</span>
								</MenuItem>
							</Submenu>
						</Menu>
						<Menu mode="horizontal" style="float: right;" theme="dark" active-name="1">
							<Submenu name="3">
								<template slot="title">
									<Icon type="ios-people" />
									<span>{{ current.user.account }}</span>
								</template>
								<MenuItem name="3-2">
								<a @click="logout" href="javascript:void(0)" :class="'w-100 h-100'">退出登录</a>
								</MenuItem>
							</Submenu>
						</Menu>
					</div>
				</Menu>
			</Header>
			<Layout>
				<Sider hide-trigger :class="'bg-light'">
					<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
						<Submenu v-for="(item, key) in current.permissions" :id="key" :name="item.permissionId">
							<template slot="title">
								<Icon type="ios-navigate"></Icon>
								{{ item.name }}
							</template>

							<MenuItem v-for="(subItem, index) in item.permissions" :name="subItem.permissionId"
								:to="subItem.path" v-show="subItem.type === 'menu'">
							<a>{{ subItem.name }}</a>
							<!--用户管理,角色管理,权限管理 etc-->
							</MenuItem>
						</Submenu>
					</Menu>
				</Sider>

				<Layout>
					<Content :class="'m-2'">
						<router-tab :class="''" />
					</Content>
				</Layout>
			</Layout>
		</Layout>
	</div>
</template>

<script>
	import local from '../../common/_local'
	import store from '../../common/store.js'
	export default {
		data() {
			return {
				jumpToInfiStatistics:"/infoStatistics",
				currentUser: {},
				interviewTotal: null,
				backviewTotal: null,
				allInterviewTotal: null,
				allBackviewTotal: null,
				showFlag: true
			}
		},
		methods: {
			
			logout: () => {
				store.commit('loginOut')
			},
			search: function() {
				if (local.session.getItem('CURRENT_USER') != null) {

					this.http
						.get({
							url: '/statisticsInfo/todayUnHandle'
						})
						.then((data) => {
							this.$data.interviewTotal = data.unHandleInterviewToday,
								this.$data.backviewTotal = data.unHandleBackviewToday
						})

					//wuweinan
					this.http
						.get({
							url: '/statisticsInfo/allTodayUnHandle'
						})
						.then((data) => {
							console.log(data);
							if (data == "没有权限查看") {
								this.showFlag = false;
							} else {
								this.showFlag = true;
								this.$data.allInterviewTotal = data.unHandleAllInterviewToday,
									this.$data.allBackviewTotal = data.unHandleAllBackviewToday
							}

						})

				}
			},

		},
		created: function() {
			this.search()
		},
		mounted() {
			// window.addEventListener("click", this.search);
		},
		watch: {
			$route: {
				handler: function(val, oldVal) {
					this.search()
				}
			}
		},
		computed: {
			current: function() {
				return store.state.currentUser
			},
		},

	}
</script>

<style scoped>
	.layout {
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}

	.layout-logo {
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}

	.layout-nav {
		width: calc(100% - 100px);
		margin: 0 auto;
		margin-right: 20px;
	}
</style>
